
import { React, Component } from 'react';
import './Index-List.css'
import { delay } from '../../utils/utils'
import { Login } from 'grommet-icons';

export default class IndexList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      path: this.props.path,
      title: this.props.title,
      image: this.props.image,
      info: this.props.info,
      navigate: this.props.navigate
    }
  }


  // 执行userNavigate得到一个跳转函数
  toProject = (path) => {
    console.log(path)
    delay(path, 0.1, this.state.navigate); 
  }

  render () {
    return ( 
      <div className='index-balck'  >
        <div className='index-balck-title'> 
          {this.state.title}
        </div>
        <div className='index-shade' onClick={this.toProject.bind(this, this.state.path)}></div>
        <div className='index-but'><div className='index-but-icon'><Login /></div><p className='index-but-txt'>查看</p></div>
        <img className='img' src={this.state.image} alt="图片" />
        <div className='index-balck-info'>{this.state.info}</div>
      </div>
    );
  }
}
